<!-- 采用html5-->>
<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">

    <!--页面显示适应移动设备-->>
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

    <title>是兄弟就来砍我</title>
    <style>
        /*元素选择器*/

       html{

       height: 100%;
            
       }

       body{

        height:100% ;
        padding: 0px;/*内边距*/
        margin: 0px;/*外边距*/

       }
   
   /* 类选择器 */
   .my-container{

   widows: 100%;
   height: 100%;
   background-color: rgb(115, 169, 190);

   }
   .my-input{

     position: relative;/*相对定位，给子元素一个定位基点*/

   }
   .my-input input{
       box-sizing: border-box;
       width: 100%;
       height: 50px;
       border: none;/*无边框*/
       outline: none;/*无外轮廓*/
       border-bottom: 1px solid #eb8b8b;
       padding-left: 120px;
   }
   .my-input label{

       position: absolute;
       left: 0px;
       top: 0px;
       line-height: 50px;/*设置行高，使之垂直居中*/
       font-size: 18px; 
       padding-left: 12px;  
   }
   .my-title{

       font-size: 50px;
       text-align: center;/*水平居中*/
       color: #ec4e0f;
       font-weight: bold;
       text-shadow: 10px 25px 12px #cccccc;
       padding-top: 25%;
       padding-bottom: 50%;
   }
   .my-btn{

       width: 40%;
       height: 50px;
       background-color: #cccccc;
       border-radius: 10px;/*圆角半径*/
       border: none;/*无边框*/
       outline: none;/*无外轮廓*/

   }
   .my-footer{

text-align: center;
color:#cccccc;
font-size: 8px; 


   }
   .my-btn:active{

       background-color: #ec4e0f;
   }
   
   </style>
</head>


<body>
    <!--  矩形区域-->>
    <div class="my-container">

        <div style="padding-left:5px;padding-right:5px;padding-top: 5px;">
            <div class="my-title">贪玩难约</div>
            <div class="my-input">
                <label>贪玩账号</label>
                <input type="text" />
            </div>
            <div class="my-input">
                <label>贪玩密码</label>
                <input type="password" />
            </div>
            <div style="text-align: center;padding-top: 25%;">
                <button class="my-btn">即刻贪玩</button>
            </div>
        </div>

        <div class="my-footer">一刀999级 &copy;贪玩科技有限公司</div>
    </div>

</body>

</html>